<template>
  <div class="panel">
    <h3>节点类型分布</h3>
    <div id="industry-bar" ref="chartRef" style="height: 300px;"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let myChart = null

onMounted(async () => {
  myChart = echarts.init(chartRef.value)

  const res = await fetch('http://127.0.0.1:8000/industry-distribution') // 注意后端地址
  const data = await res.json()

  const option = {
    title: { text: '节点类型分布' },
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    xAxis: { type: 'category',  data.map(d => d.name) },
    yAxis: { type: 'value' },
    series: [{ data: data.map(d => d.value), type: 'bar', itemStyle: { color: '#66a3ff' } }]
  }

  myChart.setOption(option)
  window.addEventListener('resize', () => myChart.resize())
})
</script>